<template>
  <div id="light">
    <img :src="lightSrc" alt="灯泡不见了哦" width="100px" @click="clickLight">
  </div>
</template>

<script>
import lighton from "../assets/lighton.png"
import lightoff from "../assets/lightoff.png"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Light",
  computed: {
    lightSrc() {
      return this.$store.state.lightState ? lighton : lightoff
    }
  },
  methods: {
    clickLight() {
      this.$store.commit("SwitchLight")
    }
  }
}
</script>

<style scoped>
  #light {
    width: 120px;
    height: 120px;
    position: fixed;
    top: 4%;
    right: 3%;
    cursor: pointer;
  }
</style>